<template>
  <el-main>
    <el-button v-if="global.$hasPerm(['sys:menu:add'])" type="primary" size="default" icon="Plus" @click="addBtn">新增</el-button>
    <!-- 表格树形数据 -->
    <el-table style="margin-top: 20px;" :data="tableDate" row-key="menuId" border lazy stripe default-expand-all>
      <el-table-column prop="title" label="菜单名称"></el-table-column>
      <el-table-column prop="icon" label="菜单图标">
        <template #default="scope">
          <el-icon v-if="scope.row.icon">
            <component :is="scope.row.icon"></component>
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="菜单类型">
        <template #default="scope">
          <el-tag v-if="scope.row.type == '0'" type="danger" size="default">目录</el-tag>
          <el-tag v-if="scope.row.type == '1'" type="success" size="default">菜单</el-tag>
          <el-tag v-if="scope.row.type == '2'" type="primary" size="default">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="parentName" label="上级菜单"></el-table-column>
      <el-table-column prop="name" label="路由名称"></el-table-column>
      <el-table-column prop="path" label="路由地址"></el-table-column>
      <el-table-column prop="url" label="组件路径"></el-table-column>
      <el-table-column prop="code" label="权限字段"></el-table-column>
      <el-table-column prop="orderNum" label="序号"></el-table-column>
      <el-table-column v-if="global.$hasPerm(['sys:menu:edit','sys:menu:delete'])"  label="操作" align="center" width="220">
        <template #default="scope">
          <el-button v-if="global.$hasPerm(['sys:menu:edit'])" type="primary" icon="Edit" size="default" @click="editBtn(scope.row)">编辑</el-button>
          <el-button v-if="global.$hasPerm(['sys:menu:delete'])" type="danger" icon="Delete" size="default" @click="deleteBtn(scope.row.menuId)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <!-- 新增或者编辑弹框 -->
    <SysDialog :title="dialog.title" :visible="dialog.visible" :height="dialog.height" :width="dialog.width"
      @on-close="onClose" @on-confirm="commit">
      <template v-slot:content>
        <el-form :model="addModels" ref="addRef" :rules="rules" label-width="80px" :inline="false" size="default">
          <el-form-item prop="type" label="菜单类型">
            <el-radio-group v-model="addModels.type">
              <el-radio :label="'0'">目录</el-radio>
              <el-radio :label="'1'">菜单</el-radio>
              <el-radio :label="'2'">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="上级菜单" prop="parentId">
                <el-tree-select v-model="addModels.parentId" :data="treeList" :render-after-expand="false" show-checkbox
                  @check-change='treeClick' check-strictly />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="菜单名称" prop="title">
                <el-input v-model="addModels.title"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="addModels.type != '2'" :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="菜单图标" prop="icon">
                <el-input v-model="addModels.icon"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="路由名称" prop="name">
                <el-input v-model="addModels.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="菜单序号" prop="orderNum">
                <el-input v-model="addModels.orderNum"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="权限字段" prop="code">
                <el-input v-model="addModels.code"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col v-if="addModels.type !=='2'"  :span="12" :offset="0">
              <el-form-item label="路由地址" prop="path">
                <el-input v-model="addModels.path"></el-input>
              </el-form-item>
            </el-col>
            <el-col v-if="addModels.type =='1'" :span="12" :offset="0">
              <el-form-item label="组件路径" prop="url">
                <el-input v-model="addModels.url"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>

      </template>

    </SysDialog>

  </el-main>
</template>

<script setup lang="ts">
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { ElMessage, type FormInstance } from 'element-plus';
import { nextTick, onMounted, reactive, ref } from 'vue';
import { getParentApi, addApi, getListApi,editApi,deleteApi } from '@/api/menu';
import type { menuType } from '@/api/menu/MenuModel';
import useInstance from '@/hooks/useInstance';

const {global} = useInstance();
//列表框属性
const { dialog, onClose, onShow, onConfirm } = useDialog();
//获取上级菜单数据，增加里面的
const treeList = ref([])
const getParent = async () => {
  let res = await getParentApi()
  if (res && res.code == 200) {
    treeList.value = res.data
  }
}
//表单ref属性
const addRef = ref<FormInstance>()
//新增和编辑的标识符
const tags = ref('')
//新增或者编辑绑定对象
const addModels = reactive({
  menuId: '',
  parentId: '',
  title: '',
  code: '',
  name: '',
  path: '',
  url: '',
  icon: '',
  parentName: '',
  orderNum: '',
  type:''

})
//新增按钮
const addBtn = () => {
  console.log(addModels)
  tags.value = '0'
  // //获取上级菜单数据
  getParent()
  dialog.title = '新增';
  dialog.height = 300
  addModels.url = ''
  onShow()
  //

  addRef.value?.resetFields()

}

//表单新增规则
const rules = reactive({
  parentId: [{ required: true, message: '请选择上级菜单', trigger: ['change', 'blur'] }],
  title: [{ required: true, message: '请填写菜单名称', trigger: ['change', 'blur'] }],
  code: [{ required: true, message: '请填写权限字段', trigger: ['change', 'blur'] }],
  name: [{ required: true, message: '请填写路由名称', trigger: ['change', 'blur'] }],
  path: [{ required: true, message: '请填写路由地址', trigger: ['change', 'blur'] }],
  url: [{ required: true, message: '请填写组件路径', trigger: ['change', 'blur'] }],
  type: [{ required: true, message: '请选择菜单类型', trigger: ['change', 'blur'] }],
  icon: [{ required: true, message: '请填写菜单图标', trigger: ['change', 'blur'] }],
  orderNum: [{ required: true, message: '请填写菜单序号', trigger: ['change', 'blur'] }],
})
//上级菜单多选框选中被触发
const treeClick = (item: any) => {
  addModels.parentName = item.title
}
//编辑菜单
const editBtn = async (row:menuType)=>{
  tags.value = '1'
  dialog.title = '编辑';
  //获取上级菜单数据
  await getParent()
  onShow()
  //回显数据
  nextTick(() => {
    Object.assign(addModels, row);
  })
  //清空表单
  addRef.value?.resetFields();
}
//删除菜单
const deleteBtn= async (menuId:string)=>{
  const confirm = await global.$myconfirm('确定删除该数据吗')
  if (confirm) {
    let res = await deleteApi(menuId);
    console.log(res);
    if (res && res.code == 200) {
      ElMessage.success(res.message)
      getList();
    }
  }
}
//表单提交
const commit = () => {
  addRef.value?.validate(async (valid) => {
    if (valid) {
       let res = null;
      if (tags.value == '0') {
        res = await addApi(addModels);
      } else {
        res = await editApi(addModels);
      }
      if (res && res.code == 200) {
        getList()
        ElMessage.success(res.message)
        onClose()
      }
    }
  })
}
//获取表格数据
const tableDate = ref([])
const getList = async () => {
  let res = await getListApi()
  if (res && res.code == 200) {
    console.log(res.data)
    tableDate.value = res.data
  }

}
onMounted(() => {
  getList()
})


</script>

<style scoped></style>